/*
 * @Author: your name
 * @Date: 2021-04-23 23:32:50
 * @LastEditTime: 2021-04-29 11:11:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \offer20k\项目代码\fantasticit\src\pages\index.tsx
 */
import styles from './index.less';
import React, { useRef, useState, useEffect } from 'react'
import Headers from "../components/Header"
import useStore from '@/context/useStore'
import { BackTop } from 'antd';
import { observer } from "mobx-react-lite"
import { useHistory } from 'umi';
import Footer from "@/components/Footer"
import ViewerImage from '@/components/viewerImage'

const IndexPage: React.FC = (props) => {
  const history = useHistory()
  let { article, category, tag } = useStore()
  let { Home } = useStore()
  const [falg, setfalg] = useState<boolean>(false)
  const inputR = useRef(null)
  useEffect(() => {
    // 获取右侧推荐
    article.getArticleRecommend();
    //  获取文章标签
    tag.getTagList();
    //  获取标签列表
    category.getCategoryList()
  }, [])

  let timers: any = undefined;

  function scroll(e: React.UIEvent | any) {
    let element = e.target
    if (element.scrollTop > 400) {
      setfalg(true)
    } else {
      setfalg(false)
    }
    if (history.location.pathname === "/homepage") {
      if (element.scrollHeight - element.scrollTop <= element.clientHeight + 1000 && Home.page <= 3 && !timers) {
        timers = setTimeout(() => {
          Home.pages()
          timers = undefined
        }, 1500);
      }
    }
  }

  console.log(history.location)

  return (
    
    <div className={styles.container} onScroll={scroll} ref={inputR}>
      <Headers />
      <ViewerImage>
      <main className={styles.main}>
        {/* <div className={styles.allContainer}> */}
        <div className={styles.allcontainer}>
          {props.children}

        </div>
      </main>
      </ViewerImage>
      {
        falg ? <BackTop target={() => inputR.current || window}  >
          <div className={styles.top} ><div className={styles.vato}> <div></div></div></div>
        </BackTop>
          : null
      }

      <div>
        {
          !history.location.pathname.includes("homepage") && !history.location.pathname.includes("article") ? <Footer /> : null
        }
      </div>

      {
        Home.flag ? <Search /> : null
      }
    </div>
  );
}

export default observer(IndexPage);

